<template>
  <el-dialog
    title="用户答题详细信息"
    :visible.sync="isOpen"
    width="50%"
    append-to-body
    :destroy-on-close="true"
  >
    <el-descriptions class="margin-top" :column="4" border>
      <el-descriptions-item label="题目内容" :span="4">{{isObj?quInfo.objContent:quInfo.subContent}}</el-descriptions-item>
      <el-descriptions-item label="题目类型" :span="2">
        <dict-tag :options="dict.type.qb_qu_type" :value="isObj?quInfo.objType:quInfo.subType" />
      </el-descriptions-item>
      <el-descriptions-item label="难度等级" :span="2">
        <el-rate v-model="quGrand" disabled></el-rate>
      </el-descriptions-item>
      <el-descriptions-item
        v-if="isObj"
        :label="quInfo.objType!=2?'选项A':'选项一'"
        :span="4"
      >{{quInfo.objOne}}</el-descriptions-item>
      <el-descriptions-item
        v-if="isObj"
        :label="quInfo.objType!=2?'选项B':'选项二'"
        :span="4"
      >{{quInfo.objTwo}}</el-descriptions-item>
      <el-descriptions-item
        v-if="isObj&&quInfo.objType!=2"
        label="选项C"
        :span="4"
      >{{quInfo.objThree}}</el-descriptions-item>
      <el-descriptions-item v-if="isObj&&quInfo.objType!=2" label="选项D" :span="4">{{quInfo.objFour}}</el-descriptions-item>
      <el-descriptions-item label="题目答案" :span="4">
        <el-tag v-if="isObj">{{formatAnswer(quInfo.objType,quInfo.objAnswer)}}</el-tag>
        <div v-else>
          <el-tag v-for="item in subAnsList" style="margin: 0 3px 0 3px;">{{item}}</el-tag>
        </div>
      </el-descriptions-item>
      <el-descriptions-item label="用户答案" :span="4">
        <el-tag v-if="isObj">{{formatAnswer(quInfo.objType,quInfo.userAnswer)}}</el-tag>
        <div v-else>
          <el-tag v-for="item in subUserAnsList" style="margin: 0 3px 0 3px;">{{item}}</el-tag>
        </div>
      </el-descriptions-item>
      <el-descriptions-item
        label="题目解析"
        :span="4"
      >{{isObj?quInfo.objAnswerContent:quInfo.subAnswerContent}}</el-descriptions-item>
      <el-descriptions-item label="题目分数" :span="2">{{quInfo.quScore}}</el-descriptions-item>
      <el-descriptions-item label="用户分数" :span="2">{{quInfo.userScore}}</el-descriptions-item>
    </el-descriptions>
    <div class="change_score">
      <span>修改分数：</span>
      <el-input v-model="quInfo.userScore" placeholder="请输入修改后分数" type="number" class="ipt" />
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="handleChangeScore">修改分数</el-button>
      <el-button @click="isOpen=false">取 消</el-button>
    </div>
  </el-dialog>
</template>
    
  <script>
export default {
  name: "UserAnsQuInfo",
  dicts: ["qb_qu_type"],
  props: {
    // 数据
    quData: {
      type: Object,
      default: {}
    },
    // 是否展开
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      // 题目信息
      quInfo: {},
      // 是否客观题
      isObj: false,
      // 难度等级
      quGrand: 0,
      // 主观题答案列表
      subAnsList: [],
      // 主观题用户答案列表
      subUserAnsList: [],
      // 更改分数
      scoreCopy: 0
    };
  },
  computed: {
    isOpen: {
      get() {
        return this.visible;
      },
      set(val) {
        this.$emit("update:visible", val);
      }
    }
  },
  watch: {
    // 监听数据变化
    quData(newVal, oldVal) {
      this.isObj = this.isObjFun(newVal);
      this.quInfo = newVal;
      // 分数副本
      this.scoreCopy = this.quInfo.userScore;
      if (this.isObj) {
        this.quGrand = this.quInfo.objGrand;
      } else {
        this.quGrand = this.quInfo.subGrand;
        this.ansFormat(this.quInfo.subAnswer, data => {
          this.subAnsList = data;
        });
        this.ansFormat(this.quInfo.userAnswer, data => {
          this.subUserAnsList = data;
        });
      }
    }
  },
  methods: {
    /** 更改分数 */
    handleChangeScore() {
      if (
        this.quInfo.userScore < 0 ||
        this.quInfo.userScore > this.quInfo.quScore ||
        !/^\d+$/.test(this.quInfo.userScore)
      ) {
        this.$modal.msgError("请输入合理的分数");
        setTimeout(() => {
          this.quInfo.userScore = this.scoreCopy;
        }, 200);
        return;
      }
      if (this.quInfo.userScore == this.scoreCopy) {
        return;
      }
      this.$emit("updateUserScore", this.quInfo);
    },
    /** 更改答案显示序号 */
    formatAnswer(quType, answer) {
      if (answer == null || answer == undefined) {
        return "";
      }
      if (quType == 1 || quType == 3) {
        // 数字版本答案
        let ansN = answer.split("$");
        // 字母版答案
        let ansW = "";
        for (let i = 0; i < ansN.length; i++) {
          switch (ansN[i]) {
            case "1":
              ansW += "A";
              break;
            case "2":
              ansW += "B";
              break;
            case "3":
              ansW += "C";
              break;
            case "4":
              ansW += "D";
              break;
          }
        }
        return ansW;
      } else {
        return quType == "1" ? "√" : "×";
      }
    },
    /** 判断是主观题还是客观题 */
    isObjFun(data) {
      if (data.objType != undefined || data.objType != null) {
        return true;
      } else {
        return false;
      }
    },
    /** 答案分隔 */
    ansFormat(ansStr, callBack) {
      callBack(ansStr == null || ansStr == undefined ? "" : ansStr.split("$"));
    }
  }
};
</script>
    
  <style scoped>
.imgSize {
  height: 54px;
  width: 96px;
  margin-left: 5px;
  margin-right: 5px;
}
.change_score {
  margin-top: 20px;
}
.change_score span {
  font-size: 18px;
  color: gray;
}
.change_score .ipt {
  width: 150px;
}
</style>